@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 默认深色主题变量 */
  --color-primary: #0a0e1f;
  --color-secondary: #1a253d;
  --color-tertiary: #243551;
  --color-surface: rgba(26, 37, 61, 0.8);
  --color-textPrimary: #ffffff;
  --color-textSecondary: rgba(255, 255, 255, 0.7);
  --color-textTertiary: rgba(255, 255, 255, 0.5);
  --color-accent: #00f5ff;
  --color-accentHover: #00d4dd;
  --color-techBlue: #0073e6;
  --color-techBlueHover: #005bb3;
  --color-border: rgba(0, 245, 255, 0.2);
  --color-borderHover: rgba(0, 245, 255, 0.4);
  --color-divider: rgba(255, 255, 255, 0.1);
  --color-glassBg: rgba(26, 37, 61, 0.8);
  --color-navBg: rgba(10, 14, 31, 0.9);
  --color-shadow: rgba(0, 115, 230, 0.3);
  --color-glow: rgba(0, 245, 255, 0.3);
  
  --gradient-primary: linear-gradient(135deg, #0a0e1f 0%, #1a253d 50%, #243551 100%);
  --gradient-tech: linear-gradient(135deg, #0a0e1f 0%, #1f2d47 100%);
  --gradient-accent: linear-gradient(135deg, #0073e6 0%, #00f5ff 100%);
  --gradient-card: linear-gradient(135deg, rgba(26, 37, 61, 0.8) 0%, rgba(36, 53, 81, 0.6) 100%);
}

body {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--gradient-primary);
  min-height: 100vh;
  color: var(--color-textPrimary);
  transition: background 0.3s ease, color 0.3s ease;
}

/* 玻璃拟态效果 */
.glass-card {
  background: var(--gradient-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 8px 32px var(--color-shadow);
  transition: all 0.3s ease;
}

.glass-nav {
  background: var(--color-navBg);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

/* 科技发光效果 */
.cyber-glow {
  box-shadow: 0 0 20px var(--color-glow);
  transition: all 0.3s ease;
}

.cyber-glow:hover {
  box-shadow: 0 0 40px var(--color-glow);
  transform: translateY(-2px);
}

/* 按钮样式 */
.cyber-button {
  background: var(--gradient-accent);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 115, 230, 0.4);
}

.cyber-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 245, 255, 0.6);
}

/* 输入框样式 */
.cyber-input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-textPrimary);
  padding: 10px 14px;
  width: 100%;
  transition: all 0.3s ease;
  font-size: 14px;
}

.cyber-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 15px var(--color-glow);
}

.cyber-input::placeholder {
  color: var(--color-textTertiary);
}

/* 浅色主题下的输入框特殊样式 */
.theme-light .cyber-input {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #1e293b;
}

.theme-light .cyber-input:focus {
  border-color: #0073e6;
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.1);
}

.theme-light .cyber-input::placeholder {
  color: #64748b;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(26, 37, 61, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #0073e6, #00f5ff);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #00f5ff, #0073e6);
}

/* 动画 */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-10px); 
  }
}

@keyframes pulse-cyber {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 40px rgba(0, 245, 255, 0.6);
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 20px rgba(0, 245, 255, 0.8);
  }
  to {
    text-shadow: 0 0 30px rgba(0, 245, 255, 1), 0 0 40px rgba(0, 245, 255, 0.8);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse-cyber {
  animation: pulse-cyber 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

/* 状态指示器 */
.status-active {
  color: #00f5ff;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.8);
}

.status-warning {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.status-error {
  color: #ff4757;
  text-shadow: 0 0 10px rgba(255, 71, 87, 0.8);
}

/* 系统标准背景 */
.system-bg {
  background: linear-gradient(135deg, #0a0e1f 0%, #1a253d 50%, #243551 100%);
}

/* 响应式 */
@media (max-width: 768px) {
  .glass-card {
    margin: 8px;
    border-radius: 12px;
  }
}

/* 添加缺失的颜色类 */
.text-electric-500 {
  color: #00f5ff;
}

.bg-electric-500 {
  background-color: #00f5ff;
}

.border-electric-500 {
  border-color: #00f5ff;
}

.text-tech-blue-400 {
  color: #0ea5e9;
}

.bg-tech-blue-400 {
  background-color: #0ea5e9;
}

.text-tech-blue-500 {
  color: #0284c7;
}

.bg-tech-blue-500 {
  background-color: #0284c7;
}

.text-tech-blue-300 {
  color: #7dd3fc;
}

.bg-tech-blue-300 {
  background-color: #7dd3fc;
}

.bg-cyber-900 {
  background-color: #0a0e1f;
}

.text-cyber-50 {
  color: #f8fafc;
}

/* 政策推荐卡片样式 */
.policy-recommendation-card {
  @apply p-4 rounded-lg bg-white/5 hover:bg-white/10 transition-all duration-300 border border-white/10 hover:border-electric-500/30;
}

/* 确保布局正确 */
#app {
  height: 100vh;
  overflow: hidden;
}

/* 修复可能的滚动问题 */
main {
  height: calc(100vh - 4rem); /* 减去header高度 */
  overflow-y: auto;
}

/* 确保侧边栏正确显示 */
.sidebar {
  flex-shrink: 0;
  height: 100vh;
}

/* 细滚动条样式 */
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}

.scrollbar-thumb-electric-500\/50::-webkit-scrollbar-thumb {
  background: rgba(0, 245, 255, 0.5);
  border-radius: 2px;
}

.scrollbar-track-white\/10::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* 主题相关工具类 */
.theme-bg-primary {
  background-color: var(--color-primary);
}

.theme-bg-secondary {
  background-color: var(--color-secondary);
}

.theme-bg-surface {
  background-color: var(--color-surface);
}

.theme-text-primary {
  color: var(--color-textPrimary);
}

.theme-text-secondary {
  color: var(--color-textSecondary);
}

.theme-text-tertiary {
  color: var(--color-textTertiary);
}

.theme-border {
  border-color: var(--color-border);
}

.theme-border-hover:hover {
  border-color: var(--color-borderHover);
}

.theme-accent {
  color: var(--color-accent);
}

.theme-accent-bg {
  background-color: var(--color-accent);
}

/* 主题过渡动画 */
.theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 浅色主题特定样式 */
.theme-light {
  /* 浅色主题的特殊调整 */
  background: var(--gradient-primary) !important;
  color: var(--color-textPrimary) !important;
}

.theme-light .glass-card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 32px var(--color-shadow);
  color: var(--color-textPrimary);
}

.theme-light .glass-nav {
  background: var(--color-navBg);
  border-right: 1px solid var(--color-border);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  color: var(--color-textPrimary);
}

.theme-light .cyber-glow {
  box-shadow: 0 0 20px var(--color-glow);
}

.theme-light .cyber-glow:hover {
  box-shadow: 0 0 40px var(--color-glow);
}

/* 浅色主题下的通用文本颜色覆盖 */
.theme-light .text-white {
  color: var(--color-textPrimary) !important;
}

.theme-light .text-gray-400 {
  color: var(--color-textSecondary) !important;
}

.theme-light .text-gray-300 {
  color: var(--color-textTertiary) !important;
}

/* 浅色主题下的背景颜色覆盖 */
.theme-light .bg-white\/5,
.theme-light .bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.theme-light .bg-white\/20 {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* 浅色主题下的透明度文本颜色 */
.theme-light .text-white\/70 {
  color: var(--color-textSecondary) !important;
}

.theme-light .text-white\/60 {
  color: var(--color-textTertiary) !important;
}

.theme-light .text-white\/50 {
  color: var(--color-textTertiary) !important;
}

/* 浅色主题下的边框颜色 */
.theme-light .border-white\/10,
.theme-light .border-white\/20 {
  border-color: var(--color-border) !important;
}

/* 浅色主题下的hover效果 */
.theme-light .hover\:bg-white\/10:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.theme-light .hover\:bg-white\/20:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* 浅色主题下的表单元素样式覆盖 */
.theme-light select,
.theme-light .bg-gray-800 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #1e293b !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

.theme-light input,
.theme-light textarea {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #1e293b !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

.theme-light input::placeholder,
.theme-light textarea::placeholder {
  color: #64748b !important;
}

.theme-light select:focus,
.theme-light input:focus,
.theme-light textarea:focus {
  border-color: #0073e6 !important;
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.1) !important;
}

/* 浅色主题下的选择框选项 */
.theme-light select option {
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* 浅色主题下的标签文本 */
.theme-light label {
  color: #374151 !important;
}

.theme-light .text-white.font-medium,
.theme-light .text-white.font-semibold {
  color: #374151 !important;
}

/* 浅色主题下的边框颜色覆盖 */
.theme-light .border-gray-600 {
  border-color: rgba(148, 163, 184, 0.4) !important;
}

.theme-light .border-gray-400 {
  border-color: rgba(148, 163, 184, 0.6) !important;
}

/* 浅色主题下的通用样式组合覆盖 */
.theme-light .bg-gray-800.text-white,
.theme-light .bg-gray-800.text-white.border-gray-600 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #1e293b !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

.theme-light .placeholder-gray-400::placeholder {
  color: #64748b !important;
}

/* 浅色主题下的一般文本颜色类覆盖 */
.theme-light .text-gray-300 {
  color: #64748b !important;
}

.theme-light .text-gray-500 {
  color: #6b7280 !important;
}

.theme-light .text-blue-200 {
  color: #2563eb !important;
}

.theme-light .text-green-400 {
  color: #059669 !important;
}

.theme-light .text-yellow-400 {
  color: #d97706 !important;
}

.theme-light .text-red-400 {
  color: #dc2626 !important;
}

/* 浅色主题下的背景颜色覆盖 */
.theme-light .bg-green-500\/20 {
  background-color: rgba(5, 150, 105, 0.1) !important;
}

.theme-light .bg-yellow-500\/20 {
  background-color: rgba(217, 119, 6, 0.1) !important;
}

.theme-light .bg-red-500\/20 {
  background-color: rgba(220, 38, 38, 0.1) !important;
}

.theme-light .bg-blue-500\/20 {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

/* 深色主题特定样式 */
.theme-dark {
  /* 深色主题的特殊调整 */
}

.theme-dark .glass-card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 32px var(--color-shadow);
}

.theme-dark .glass-nav {
  background: var(--color-navBg);
  border-right: 1px solid var(--color-border);
}

.theme-dark .cyber-glow {
  box-shadow: 0 0 20px var(--color-glow);
}

.theme-dark .cyber-glow:hover {
  box-shadow: 0 0 40px var(--color-glow);
}

/* 主题切换时的平滑过渡 */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 确保主题切换不影响现有动画 */
.animate-pulse,
.animate-spin,
.animate-bounce,
.animate-ping {
  transition: none !important;
}

/* 自定义scrollbar的主题适配 */
.theme-light .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 115, 230, 0.3);
}

.theme-light .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 115, 230, 0.5);
}

.theme-dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 245, 255, 0.3);
}

.theme-dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 245, 255, 0.5);
} 